<template>
<BeforeNavBar/>
  <div class="ai-search">
    <div class="ai-title">  
      <h3>AI搜索</h3>  
      <p style="margin: 0;">互动问答板块供各位同学就课程问题交流学习。</p>  
  </div>
  <!-- <div class="searchbox">
    <div class="container">
      <input
        class="my-autocomplete"
        v-model="query"
        placeholder="搜索..."
      />
      <button class="icon-button" @click="search">
        <img
          src="@/assets/icon-search.png"
          alt="Icon"
          class="button-icon"
        />
      </button>
    </div>
  </div> -->
  <div class="embedded-iframe-container">  
    <iframe :src="embeddedUrl" frameborder="0" width="100%" height="680px"></iframe>  
  </div>  
  </div>
</template>

<script>
import BeforeNavBar from '@/components/BeforeNavBar.vue';
export default {
  name: 'beforeAISearch',
  components:{
BeforeNavBar
  },
  data() {  
    return {  
      // 假设这是你要嵌入的网页URL  
      embeddedUrl: 'http://10.33.24.98:8080',  
    };  
  },  
  methods: {
    search() {
      // 模拟搜索结果
     
    },
  },
};
</script>

<style scoped>
.ai-search {
  padding: 20px;
  background: linear-gradient(135deg, rgba(17, 22, 42, 1) 0%, rgba(17, 22, 42, 1)100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 150px 0 150px;
}
.ai-title{
width: 100%;
  display: flex; 
  align-items: bottom;
  margin: 0;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 1);
}
.ai-title h3{
  margin: 0;
  text-align: left;
  font-size: 36px;
  padding-left: 20px;
}
.ai-search p{
 padding-left:20px ;
 padding-top: 21px;
 color: rgba(255, 255, 255, 1);
 font-size: 18px;
}
.search-container {
  display: flex;
  width: 50%;
  margin-bottom: 20px;
}

.search-container input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-container button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-container button:hover {
  background-color: #0056b3;
}

.search-results {
  width: 50%;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

.result-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  transition: transform 0.3s;
}

.result-item h3 {
  margin: 0;
  font-size: 18px;
  color: #007bff;
}

.result-item p {
  margin: 5px 0;
  color: #333;
}

.result-item:hover {
  transform: translateY(-5px);
}

.no-results {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
  color: #888;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
.searchbox {
  height: auto;
  width: 550px;
}
.container {
  position: relative;
  height: auto;
}
.my-autocomplete {
  position: relative; /* 确保.icon-button可以相对于它定位 */
  width: 550px;
  height: 32px;
  opacity: 1;
  border-radius: 60px;
  background: rgba(255, 255, 255, 1);
  border: none;
  padding: 2px;
  display: inline-block; /* 如果你想要这个元素表现得像一个内联块元素 */
  padding-left: 15px;
  outline: none;
}

.icon-button {
  position: absolute;
  top: 50%; /* 相对于父元素顶部偏移50% */
  transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin-left: 250px;
}
.button-icon {
  width: 100%;
  height: auto;
  display: block;
}
.icon-button:hover {
  filter: brightness(90%);
}


.embedded-iframe-container{
  width: 100%;
}
</style>
